// pages/songDetail/songDetail.js
import request from '../../utils/request.js';
import PubSub from 'pubsub-js';
import moment from 'moment';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: true,   //标识音乐是否播放
    songList: [],  //对应musicId的歌曲信息
    musicId: '', //音乐ID
    currentTime: '00:00', //实时时间
    durationTimer: '00:00', //总时长
    currentWidth: '',    //实时进度条长度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //监听musicContent事件，获取上一页面通过eventChannel传送到当前页面的数据
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('musicContent',(data) =>{
      this.setData({
        musicId: data.musicId,
        musicUrl: data.musicUrl,
      })
    });
    //请求音乐详情
    this.getSongDetail(this.data.musicId);
     /**
     * 问题：如果用户操作系统的控制音乐播放/暂停的按钮，页面不知道，导致页面显示是否播放的状态和真实的音乐播放状态不一致
     * 解决方案：
     *  1.通过控制音频的实例 backGroundAudioManager去监视音乐的播放/暂停
    */
    //创建控制音频实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    //监听背景音乐播放
    this.backgroundAudioManager.onPlay(() =>{
      this.changePlayState(true);
    });
    //监听背景音乐暂停
    this.backgroundAudioManager.onPause(() =>{
      this.changePlayState(false);
    });
    //监听背景音乐停止
    this.backgroundAudioManager.onStop(() =>{
      this.changePlayState(false);
    })
    //监听音乐自动播放结束
    this.backgroundAudioManager.onEnded(() =>{
      PubSub.subscribe('musicId',(msg,musicId) =>{
        this.musicUrlList(musicId);
        console.log('++++');
        PubSub.unsubscribe('musicId');
      })
      //自动播放下一首歌,自动播放
      PubSub.publish('switchType','Next');
      // 将实时进度条时间重置0，和总时间重置0
      this.setData({
        currentWidth: 0,
        durationTimer: '00:00'
      })
    })

    //监听音乐实时播放进度
    this.backgroundAudioManager.onTimeUpdate(() =>{
      let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format('mm:ss');
      let currentWidth = this.backgroundAudioManager.currentTime/this.backgroundAudioManager.duration * 450;
      this.setData({
        currentTime,
        currentWidth
      })
    })

   

  },
  //改变背景音乐播放/暂停/停止函数功能
  changePlayState(isPlay){
    this.setData({
      isPlay
    })
  },

  //音乐详情数据回调
  async getSongDetail(ids){
    let songDetail = await request('/song/detail',{ids});
    let durationTimer = moment(songDetail.songs[0].dt).format('mm:ss');   //解析获取歌曲总时间
    this.setData({
      songList: songDetail.songs[0],
      durationTimer
    })
    wx.setNavigationBarTitle({
      title: this.data.songList.name,
    })
    this.musicControl(this.data.isPlay,this.data.musicUrl);
  },
  
  //点击音乐暂停/播放
  handleMusicPlay(){
    this.setData({
      isPlay: !this.data.isPlay
    })
    //开始播放音乐
    this.musicControl(this.data.isPlay,this.data.musicUrl);
  },

  //请求音频数据
  async musicUrlList(id){
    let musicAudioItem = await request('/song/url',{id});
    this.setData({
      musicUrl:musicAudioItem.data[0].url
    })
    this.getSongDetail(id);
  },

  //音频播放/暂停
  musicControl(isPlay,musicUrl){
    if (isPlay) {
      this.backgroundAudioManager.src = musicUrl;
      this.backgroundAudioManager.title = this.data.songList.name;
    }else{
      this.backgroundAudioManager.pause();
    }
  },

  //切换歌曲，上一首/下一首
  handleSwitch(event){
    this.setData({
      isPlay:true
    })
    //获取歌曲的类型
    let type = event.currentTarget.id;
    //订阅recommendSong页面发布的消息
    PubSub.subscribe('musicId',(msg,musicId) =>{
      this.musicUrlList(musicId);
      PubSub.unsubscribe('musicId');
    })
    //发布消息给recommendSong页面
    PubSub.publish('switchType',type);
  },


  
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})